<html>
<head>
    <link href="/seserver/static/css/reset.css" rel="stylesheet" type="text/css" />
    <link href="/seserver/static/css/base.css" rel="stylesheet" type="text/css" />
    <link href="/seserver/static/css/buttons.css" rel="stylesheet" type="text/css" />
    <script src="https://www.google.com/jsapi?key=ABQIAAAAXRsX6S_h3QywK4eSAk4V6hScELNy4-zWiL7MRTjCOW4JjQL_KBR6YdhYBCPRPo7bLfAlsesUQyWnYg" type="text/javascript"></script>
    <script src="/seserver/static/js/jscolor.js" type="text/javascript"></script>
    <script src="/seserver/static/js/base.js" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
    google.load("jquery", "1");
    google.setOnLoadCallback(OnLoad);
    {% if request.user.username %}
    username = "{{request.user.username}}";
    {% else %}
    username = 'Anonymous';
    {% endif %}

    </script>


</head>
<body>

<div id="main" style="margin-top:75px">
    <div id="levels"> 
        <div class="level_button rounded" id="new" onclick="load_level('new')">
            New Level
        </div>
        {% for level in levels %}
            <div class="level_button rounded" id="{{level.id}}" onclick="load_level({{level.id}})">
                {{level.name}}
            </div>
        {% endfor %}
    </div>
    <div style="float:left;width:720px">
        <div id="menu_bar" style="width:720px;">
            <input type="button" class="button toggle" id="new_point_button" onclick='toggle_new_point()' value="New Point Toggle">
            <input type="button" class="button toggle" id="delete_point_button" onclick='toggle_delete_point()' value="Delete Point Toggle">
            <input type="button" class="button right" id="save_level" onclick="send_level()" value="Save">
            <input type="button" class="button right" id="reload_level" onclick="reload_level()" value="Reload">
            <input type="button" class="button right" id="clone_level" onclick="clone_level()" value="Clone">
            <input type="button" class="button right" id="clear_points" onclick="clear_points()" value="Clear Points">
        </div>
        <canvas id="level_view" style="border:1px solid" height="480" width="720">
        </canvas>
        <canvas id="scroll_bar" style="border:1px solid" height="10" width="720">
        </canvas>
    </div>
    <div id="level_details" >
        <table>
            <tr span='3'>
                <div id='result'>
                </div>
            </tr>
            <tr>
                <td>Display Name:</td>
                <td><input type="text" id="display_name"></td>
            </tr>
            <tr>
                <td>Name:</td>
                <td><input type="text" id="name"></td>
            </tr>
            <tr>
                <td></td>
                <td align='right'>Alpha:</td>
            </tr>
            <tr>
                <td>Hill Color Base</td>
                <td>
                    <input type="text" class="color {hash:true}" id="hill_color_base">
                    <input type="range" class="range" id="hill_alpha_base" min="0" max="255" step="3" value="255">
                </td>
            </tr>
            <tr>
                <td>Hill Color Alt</td>
                <td>
                    <input type="text" class="color {hash:true}" id="hill_color_alt">
                    <input type="range" class="range" id="hill_alpha_alt" min="0" max="255" step="3" value="255">
                </td>
            </tr>
            <tr>
                <td>Sky Color</td>
                <td>
                    <input type="text" class="color {hash:true}" id="sky_color"> 
                    <input type="range" class="range" id="sky_alpha" min="0" max="255" step="3" value="255">
                </td>
            </tr>
            <tr>
                <td>Sequence</td>
                <td><input type="text" id="sequence"></td>
            </tr>
            <tr>
                <td>Active</td>
                <td><input type="checkbox" id="active"></td>
            </tr>
            <tr>
                <td>Gravity Factor - Y</td>
                <td><input type="text" id="gravity_factor_y"></td>
            </tr>
            <tr>
                <td>Gravity Factor - X</td>
                <td><input type="text" id="gravity_factor_x"></td>
            </tr>
            <tr>
                <td>Creator</td>
                <td><label type="text" id="creator"></td>
            </tr>
            <tr>
                <td>Seconds to Complete</td>
                <td><input type="text" id="time_to_complete"></td>
            </tr>
        </table>
    </div>
    
</div>

</body>
</html>
